<template>
  <div class="my">
    <div class="my-title">
      <van-nav-bar
        title="个人中心"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div class="my-banner">
      <van-icon
        class="setting-o"
        name="setting-o"
        @click="gotoset"
      />
      <div class="headpic">
        <van-image
          round
          width="60px"
          height="60px"
          :src="user.user.user_headpic"
        />
      </div>
      <div class="userphone"><van-icon name="contact" />{{ user.user.user_name }}</div>
    </div>
    <div class="my-list">
      <div class="title">卡包</div>
      <van-cell
        :title="`银联优惠(${array1.length})`"
        is-link
        arrow-direction="down"
        value=""
        @click="checkflag(0)"
      >
      </van-cell>
      <div v-show="flag[0].flag">
        <van-card
          v-for="item1 in array1"
          :key="item1.id"
          :desc="item1.coupon_explain"
          :title="item1.coupon_name"
          :thumb="item1.coupon_ico_path"
        />
      </div>
      <van-cell
        :title="`VISA权益(${array2.length})`"
        is-link
        arrow-direction="down"
        value=""
        @click="checkflag(1)"
      >
      </van-cell>
      <div v-show="flag[1].flag">
        <van-card
          v-for="item2 in array2"
          :key="item2.id"
          :desc="item2.coupon_explain"
          :title="item2.coupon_name"
          :thumb="item2.coupon_ico_path"
        />
      </div>
      <van-cell
        :title="`环球锦囊团优惠(${array3.length})`"
        is-link
        arrow-direction="down"
        value=""
        @click="checkflag(2)"
      >
      </van-cell>
      <div v-show="flag[2].flag">
        <van-card
          v-for="item3 in array3"
          :key="item3.id"
          :desc="item3.coupon_explain"
          :title="item3.coupon_name"
          :thumb="item3.coupon_ico_path"
        />
      </div>
      <van-cell
        :title="`高鸟屋权益(${array4.length})`"
        is-link
        arrow-direction="down"
        value=""
        @click="checkflag(3)"
      >
      </van-cell>
      <div v-show="flag[3].flag">
        <van-card
          v-for="item4 in array4"
          :key="item4.id"
          :desc="item4.coupon_explain"
          :title="item4.coupon_name"
          :thumb="item4.coupon_ico_path"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { getcouponID } from '@/api';
export default {
  data() {
    return {
      user: this.$store.state.user,

      flag: [{ flag: false }, { flag: false }, { flag: false }, { flag: false }],
      array1: [],
      array2: [],
      array3: [],
      array4: [],
    };
  },
  created() {
    this.$store.commit('user/updateUser');
    this.getcouponID();
  },
  methods: {
    onClickLeft() {
      if (localStorage.token != undefined) {
        return this.$router.push('/');
      }
      this.$router.go(-1);
    },
    checkflag(num) {
      this.flag[num].flag = !this.flag[num].flag;
    },
    async getcouponID() {
      const res = await getcouponID(this.$store.state.user.user.id);

      const {
        data: { code, message },
      } = res;
      console.log(message);
      if (code === 200) {
        this.array1 = message.filter((item) => {
          return item.coupon_type === 'union';
        });
        this.array2 = message.filter((item) => {
          return item.coupon_type === 'visa';
        });
        this.array3 = message.filter((item) => {
          return item.coupon_type === 'jinnang';
        });
        this.array4 = message.filter((item) => {
          return item.coupon_type === 'gaodaowu';
        });
      }
    },
    gotoset() {
      this.$router.push('/data');
    },
  },
};
</script>
<style lang="scss">
body {
  background: #fafafa;
  .my {
    box-sizing: border-box;
    width: 100%;
    .my-banner {
      height: 145px;
      width: 100%;
      box-sizing: border-box;
      background-image: url('@/assets/images/minebg.png');
      background-size: 100% 100%;
      position: relative;
      .van-icon {
        top: 15px;
        left: 350px;
      }
      .van-image {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .userphone {
        position: absolute;
        bottom: 0;
        left: 53%;
        transform: translateX(-50%);
        .van-icon {
          position: absolute;
          top: 0;
          left: -20px;
        }
      }
    }
    .my-list {
      width: 100%;
      padding: 10px;
      box-sizing: border-box;
      .title {
        border-left: 5px solid #ffb000;
        padding-right: 10px;
        box-sizing: border-box;
      }
      .van-card {
        background: #fff;
        .van-image__img {
          width: 100%;
          height: 100%;
        }
        .van-card__content {
          justify-content: center;
          .van-card__title {
            font-size: 15px;
            color: #4d4d4d;
          }
          .van-card__desc {
            font-size: 15px;
            color: #f23030;
            background-color: #fff4ec;
            display: inline-block;
            padding: 0 5px;
            margin-top: 5px;
          }
        }
      }

      .van-cell {
        margin-top: 15px;
        box-sizing: border-box;
        padding: 10px;
      }
    }
  }
}
</style>
